<template>
    <div>
        <div class="upper">
            <el-input v-model="adm_name" placeholder="姓名查询" width="200px"></el-input>
            <el-button type="primary" @click="searchAdmin">查询</el-button>
            <el-button type="success" @click="open_addAdmin">添加</el-button>
        </div>
        <uppertitle titleText="管理员列表"></uppertitle>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="userName" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="turename" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="power" label="后台权限">
                <template slot-scope="scope">
                    {{ scope.row.power == "0" ? "系统管理员" : "课程管理员" }}
                </template>
            </el-table-column>
            <el-table-column prop="createAt" label="注册日期">
                <template slot-scope="scope">
                    {{ new Date(scope.row.createAt).toLocaleString() }}
                </template>
            </el-table-column>
            <el-table-column prop="cnotrol" label="操作">
                <template slot-scope="scope">
                    <span @click="open_changeAdmin(scope)">编辑</span>
                    <span style="color: red;" @click="del_damin(scope)">删除</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pageBox">
            <el-pagination background layout="prev, pager, next" :total="count" :page-size="pageSize"
                @current-change="changeList">
            </el-pagination>
        </div>
        <addAdmin></addAdmin>
        <changeAdmin></changeAdmin>

    </div>
</template>

<script>
import add_admin from "../components/addAdmin.vue"
import _changeAdmin from "../components/changeAdmin.vue"
import { _getAdminInfo, _finfAdmin, _delAdmin } from "../api/toos"
export default {
    data() {
        return {
            tableData: [
                {
                    userName: "",
                    turename: "",
                    power: "",
                    createAt: "",
                    tokenId: "",
                }
            ]
            ,
            adm_name: "",
            pageStart: 1,
            pageSize: 3,
            count: 100
        }
    },
    components: {
        "addAdmin": add_admin,
        "changeAdmin": _changeAdmin
    },
    methods: {
        async changeList(aa) {
            this.pageStart = aa
            this.getList(aa)
        },
        async getList(bb) {
            const res = await _getAdminInfo(bb)
            console.log(res)
            this.count = res.data.data.count
            console.log(this.count)
            this.tableData = res.data.data.list
        },
        open_addAdmin() {
            this.$eventBus.$emit("open_addAdmin", true)
        },
        open_changeAdmin(scope) {
            this.$eventBus.$emit("open_changeAdmin", true, scope.row)
        },
        async searchAdmin() {
            const res = await _finfAdmin(this.adm_name)
            console.log(res)
            this.count = res.data.data.list.length
            console.log(this.count)
            this.tableData = res.data.data.list
        },
        async del_damin(scope) {
            console.log(scope.row.tokenId)
            const res = await _delAdmin(scope.row.tokenId)
            console.log(res)
            if (res.data.success) {
                this.getList(this.pageStart)
                this.$message.success("删除成功")
            }
        }
    },
    mounted() {
        this.getList(this.pageStart)
        this.$eventBus.$on("force_update_admin", () => {
            this.$forceUpdate()
        })
    }
}
</script>

<style lang="less" scoped>
.upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pageBox {
    margin-top: 10px;
}
</style>